<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1166138
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 1166138</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/SpawnTask.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1166138">Mozilla Bug 1166138</a>
  <p id="display"></p>
  <div id="content" style="display: none">
  </div>

  <img srcset="file_bug1166138_1x.png 1x, file_bug1166138_2x.png 2x"
       src="file_bug1166138_def.png"
       onload="onLoad()">

  <script type="application/javascript">
    var img1x = "http://mochi.test:8888/tests/dom/html/test/file_bug1166138_1x.png";
    var img2x = "http://mochi.test:8888/tests/dom/html/test/file_bug1166138_2x.png";
    var imgdef = "http://mochi.test:8888/tests/dom/html/test/file_bug1166138_def.png";
    var onLoadCallback = null;
    var done = false;

    var startPromise = new Promise((a) => {
      onLoadCallback = () => {
        var image = document.querySelector('img');
        // If we aren't starting at 2x scale, resize to 2x scale, and wait for a load
        if (image.currentSrc != img2x) {
          onLoadCallback = a;
          SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 2]]});
        } else {
          a();
        }
      };
    });

    // if aLoad is true, waits for a load event. Otherwise, spins the event loop twice to
    // ensure that no events were queued to be fired.
    function spin(aLoad) {
      if (aLoad) {
        return new Promise((a) => {
          ok(!onLoadCallback, "Shouldn't be an existing callback");
          onLoadCallback = a;
        });
      } else {
        return new Promise((a) => SimpleTest.executeSoon(() => SimpleTest.executeSoon(a)));
      }
    }

    function onLoad() {
      if (done) return;
      ok(onLoadCallback, "Expected a load event");
      if (onLoadCallback) {
        var cb = onLoadCallback;
        onLoadCallback = null;
        cb();
      }
    }

    add_task(function* () {
      yield startPromise;
      var image = document.querySelector('img');
      is(image.currentSrc, img2x, "initial scale must be 2x");

      SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 1]]});
      yield spin(true);
      is(image.currentSrc, img1x, "pre-existing img tag to 1x");

      SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 2]]});
      yield spin(true);
      is(image.currentSrc, img2x, "pre-existing img tag to 2x");

      // Try removing & re-adding the image
      document.body.removeChild(image);

      SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 1]]});
      yield spin(false); // No load should occur because the element is unbound

      document.body.appendChild(image);
      yield spin(true);
      is(image.currentSrc, img1x, "remove and re-add tag after changing to 1x");

      document.body.removeChild(image);
      SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 2]]});
      yield spin(false); // No load should occur because the element is unbound

      document.body.appendChild(image);
      yield spin(true);
      is(image.currentSrc, img2x, "remove and re-add tag after changing to 2x");

      // get rid of the srcset attribute! It should become the default
      image.removeAttribute('srcset');
      yield spin(true);
      is(image.currentSrc, imgdef, "remove srcset attribute");

      // Setting srcset again should return it to the correct value
      image.setAttribute('srcset', "file_bug1166138_1x.png 1x, file_bug1166138_2x.png 2x");
      yield spin(true);
      is(image.currentSrc, img2x, "restore srcset attribute");

      // Create a new image
      var newImage = document.createElement('img');
      // Switch load listening over to newImage
      newImage.addEventListener('load', onLoad);
      image.removeEventListener('load', onLoad);

      document.body.appendChild(newImage);
      yield spin(false); // no load event should fire - as the image has no attributes
      is(newImage.currentSrc, "", "New element with no attributes");
      newImage.setAttribute('srcset', "file_bug1166138_1x.png 1x, file_bug1166138_2x.png 2x");
      yield spin(true);
      is(newImage.currentSrc, img2x, "Adding srcset attribute");

      SpecialPowers.pushPrefEnv({'set': [['layout.css.devPixelsPerPx', 1]]});
      yield spin(true);
      is(newImage.currentSrc, img1x, "new image after switching to 1x");
      is(image.currentSrc, img1x, "old image after switching to 1x");

      // Clear the listener
      done = true;
    });
  </script>
</body>
</html>
